<template>
	<div class="message">
		<slot name="one">
			<div class="title">
				<img src="../js/img/prev.png" alt="">
				<p class="users">账户信息</p>
			</div>
			<div class="countent">
				<span>头像</span>
				<img src="../js/img/jt.png" alt="" class="you">
				<div class="right_ui">
					<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
					 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				
			</div>
			<div class="user">
				<span>用户名</span>
				<div class="pl">
					<img src="../js/img/jt.png" alt="">
					<p>{{msg}}</p>
				</div>
				
			</div>
			<div class="shouhuo" @click="address">
				<span>收货地址</span>
				<img src="../js/img/jt.png" alt="">
			</div>
			<p class="bind">账号绑定</p>
			<div class="phone" @click="bang">
				<img src="../js/img/phoneblue.png" alt="" class="tell">
				<span class="sj">手机</span>
				<img src="../js/img/jt.png" alt="" class="jt">
			</div>
			<p class="anquan">安全设置</p>
			<router-link to="update">
				<div class="logins">
					<span>登录密码</span>
					<div class="span">
						<span>修改</span>
						<img src="../js/img/jt.png" alt="">
					</div>
				</div>
			</router-link>
			
			<button class="tuichu" @click.prevent="login">退出登录</button>
			<div class="bj" v-show="isstatic">
				<div class="pop_up">
					<img src="../js/img/gantanhao.png" alt="">
					<p>{{ test }}</p>
					<p class="sure" @click="sure">确认</p>
				</div>
			</div>
			
		</slot>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				imageUrl: '',
				isstatic:false,
				test:'',
				msg:''
			};
		},
		created() {
			let a = this;
			this.$axios({
				url: 'https://elm.cangdu.org/v1/user',
				method: 'get',
			}).then(function(res) {
					a.msg = res.data.username;
			}).catch(function(error){
				window.console.log(error)
			})
		},
		methods: {
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			login:function(){
				let obj = this;
				this.$axios({
					url:'https://elm.cangdu.org/v2/signout',
					methos:'get'
				}).then(function(res){
					obj.isstatic=true;
					window.console.log(res);
					obj.test = '退出成功'
				}).catch(function(error){
					window.console.log(error)
				})
			},
			sure:function(){
				this.isstatic = false;
			},
			bang:function(){
				this.isstatic=true;
				this.test = '请在手机APP中设置'
			},
			address:function(){
				this.$router.push('address');
			}
		}
	}
</script>

<style scoped>
	.message {
		width: 320px;
		height: 568px;
		background-color: #F2F2F2;
	}
	.title {
		width: 320px;
		height: 39px;
		background-color: #007AFF;
		line-height: 39px;
		text-align: center;
	}
	.title img {
		width: 12px;
		height: 20px;
		float: left;
		margin-left: 10px;
		margin-top: 10px;
	}
	.users {
		display: inline-block;
		color: white;
		font-size: 16px;
	}
	.right_ui{
		width: 60px;
		height: 62px;
		float: right;
		margin-top: 4px;
		margin-right: 15px;
	}
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader{
		margin-top: 4px;
		/* margin-right: 30px; */
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 50%;
		border: 1px solid #000000;
	}
	.avatar {
		width: 30px;
		height: 30px;
		display: block;
		border-radius: 50%;
	}
	.countent{
		width: 318px;
		height: 62px;
		background-color: white;
		margin-top: 10px;
		line-height: 62px;
		border: 1px solid gainsboro;
	}
	.countent span{
		margin-left: 10px;
		font-size: 15px;
	}
	.user{
		width: 320px;
		height: 41px;
		background-color: white;
		line-height: 41px;
		text-indent: 10px;
		font-size: 15px;
		position: relative;
		border-bottom: 1px solid gainsboro;
	}
	.you{
		width: 20px;
		height: 20px;
		float: right;
		margin-top: 20px;
	}
	.user p{
		float: right;
		display: inline-block;
		margin-right: 10px;
	}
	.user img{
		width: 20px;
		height: 20px;
		float: right;
		right: 0;
	}
	.pl{
		width: 100px;
		height: 30px;
		float: right;
		/* border: 1px solid black; */
		position: absolute;
		top: 4px;
		right: 0;
		line-height: 30px;
	}
	.shouhuo{
		width: 320px;
		height: 42px;
		background-color: white;
		line-height: 42px;
		text-indent: 10px;
	}
	.shouhuo span{
		font-size: 15px;
	}
	.shouhuo img{
		width: 20px;
		height: 20px;
		float: right;
		margin-right: 5px;
		margin-top: 10px;
	}
	.bind{
		width: 320px;
		height: 32px;
		font-size: 14px;
		text-indent: 10px;
		line-height: 32px;
	}
	.phone{
		width: 320px;
		height: 42px;
		line-height: 42px;
		background-color: white;
	}
	.sj{
		text-indent: 10px;
		margin-left: 10px;
		font-size: 12px;
	}
	.tell{
		width: 20px;
		height: 22px;
		margin-left: 10px;
		margin-top: 10px;
	}
	.jt{
		width: 20px;
		height: 20px;
		float: right;
		margin-top: 10px;
	}
	.anquan{
		width: 320px;
		height: 32px;
		font-size: 15px;
		text-indent: 10px;
		line-height: 32px;
	}
	.logins{
		width: 320px;
		height: 42px;
		background-color: white;
		line-height: 42px;
		position: relative;
		text-indent: 10px;
		color: #000000;
	}
	.span{
		position: absolute;
		float: right;
		width: 60px;
		height: 42px;
		top: 0;
		right: 10px;
		line-height: 42px;
		color: #999999;
		font-size: 14px;
	}
	.span img{
		width: 20px;
		height: 20px;
		float: right;
		position: absolute;
		
		right: 0;
		margin-top: 10px;
	}
	.tuichu{
		margin-top: 20px;
		margin-left: 5px;
		width: 301px;
		height: 30px;
		background-color: #D8584A;
		color: white;
		border: none;
		border-radius: 5px;
		line-height: 30px;
	}
	.bj {
		width: 320px;
		height: 568px;
		background-color: rgba(0, 0, 0, 0);
		/* background-color: #000000; */
		position: fixed;
		top: 0;
		left: 0;
	}
	
	.pop_up {
		width: 240px;
		height: 158px;
		background: white;
		border-radius: 10px;
		top: 200px;
		left: 40px;
		position: fixed;
		text-align: center;
	}
	
	.pop_up img {
		height: 60px;
		width: 60px;
		margin-top: 20px;
		/* padding-top: 40px; */
	}
	
	.sure {
		width: 240px;
		height: 36px;
		line-height: 36px;
		color: white;
		background-color: #4cd964;
		border-radius: 5px;
		margin-top: 35px;
		font-size: 20px;
	}
	
	.test {
		display: inline-block;
		position: fixed;
		right: 10px;
		padding: 20px 20px;
	}
</style>
